<template>
  <div class="scheme-list">
    <el-form :model="form" label-width="100px" :inline="true">
      <el-form-item label="流域" prop="zoneId">
        <el-select
          v-model="form.zoneId"
          placeholder="请选择"
          filterable
          @change="handleExamSchemeList"
        >
          <el-option
            :key="index + item"
            v-for="(item, index) in zoneList"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="计算方案类型" prop="calcscType">
        <el-select
          v-model="form.calcscType"
          placeholder="请选择"
          filterable
          @change="handleExamSchemeList"
          clearable
        >
          <el-option
            :key="index + item"
            v-for="(item, index) in calcscTypeList"
            :value="item.id"
            :label="item.name"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="模型类型" prop="calcscType">
        <el-select
          v-model="form.model"
          class="m-2"
          placeholder="请选择"
          @change="handleExamSchemeList"
        >
          <el-option
            v-for="item in modelTypeOptions"
            :key="item.modelType"
            :label="item.typeName"
            :value="Number(item.modelType)"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="table-box">
      <div class="table-box-left">
        <el-table :data="scNameList" border style="width: 100%">
          <el-table-column align="center" label="单选" width="60">
            <template #default="scope">
              <el-radio v-model="scRadio" :label="scope.row.id">{{ '' }}</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="scName" label="方案名称" align="center" />
        </el-table>
      </div>
      <div class="table-box-right">
        <!-- 场次和场次特征值 -->
        <div class="session-box">
          <session-feature :calc-scid="scRadio" />
        </div>
        <!-- 方案评定结果统计 -->
        <div class="result-box">
          <result-statistics :calc-scid="scRadio" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getZone } from '@/services/modules/model-config'
import { getExamSchemeList } from '@/services/modules/model-exam'
import { getCalcModelType } from '@/services/modules/compute-methods'
import { useCommonData } from '@/store/modules/common-data.js'
import SessionFeature from './cpns/session-feature/index.vue'
import ResultStatistics from './cpns/result-statistics/index.vue'

const { calcscTypeList } = useCommonData()
const zoneList = ref([])
const form = ref({
  zoneId: '',
  calcscType: 2,
  model: ''
})
// 模型类型列表
const modelTypeOptions = ref([])
// 方案名称列表
const scNameList = ref([])
const scRadio = ref('')

// 获取流域列表
const handleGetZoneList = async () => {
  const res = await getZone()
  if (res.code === 200) {
    zoneList.value = res.data
    form.value.zoneId = res.data[0].id
  }
}
// 获取模型类型列表
const handleGetModelTypeList = async () => {
  const res = await getCalcModelType()
  if (res.code === 200) {
    modelTypeOptions.value = res.data
    form.value.model = modelTypeOptions.value[1].modelType
  }
}
// 查询考核的计算方案列表
const handleExamSchemeList = async () => {
  scRadio.value = ''
  const res = await getExamSchemeList(form.value)
  if (res.code === 200) {
    scNameList.value = res.data
    if (res.data.length) scRadio.value = res.data[0].id
  }
}
const init = async () => {
  await handleGetZoneList()
  await handleGetModelTypeList()
  await handleExamSchemeList()
}
init()
</script>

<style lang="less" scoped>
.scheme-list {
  height: 100%;
  .table-box {
    display: flex;
    height: calc(100% - 50px);
    .table-box-left {
      width: 400px;
      height: 100%;
      box-sizing: border-box;
      border: 1px solid #149bd5;
      :deep(.el-table--fit) {
        border-radius: 5px;
      }
      border-radius: 5px;
    }
    .el-table {
      height: calc(100%);
    }
    .table-box-right {
      width: calc(100% - 410px);
      margin-left: 10px;
      .session-box {
        height: 330px;
        box-sizing: border-box;
        margin-bottom: 10px;
      }
      .result-box {
        height: calc(100% - 340px);
        box-sizing: border-box;
        border: 1px solid #149bd5;
        border-radius: 5px;
      }
    }
  }
}
</style>
